<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/vue-2.6.12.js"></script>
	<script src="js/vue-router-3.4.9.js"></script>
</head>
<body>

<div id="app">
	<router-link to="/login">登录</router-link>
	<router-link to="/register">注册</router-link>
	<hr>
	<router-view></router-view>
</div>


<!-- 登录的表单组件-->
<template id="login-form">
	
	<form>
<!--		username:<input type="text" name="username" v-model="username"> <br>-->
<!--		password:<input type="password" name="password" v-model="password"> <br>-->
<!--		<button type="button">登录</button> <router-link to="/register"><button type="button">注册</button></router-link>-->
		<router-link to="/login/phone">手机号登录</router-link>
		<router-link to="/login/pass">账密登录</router-link>
		<hr>
		<router-view></router-view>
	</form>

</template>

<!-- 注册的表单组件-->
<template id="register-form">
	<form>
		
		username:<input type="text" v-model="username"> <br>
		password:<input type="password" v-model="password"> <br>
		password2:<input type="password" v-model="password2"> <br>
		<router-link to="/login"><button type="button">登录</button></router-link> <button type="button">注册</button>
	</form>
</template>

<!-- 手机号登录的表单-->
<template id="login-form-phone">
	<form>
		手机号:<input type="text"> <br>
		验证码:<input type="text"><br>
		<button type="button">登录</button>
	</form>
</template>

<template id="login-form-pass">
	<form>
		账号:<input name="username"><br>
		密码:<input name="password"><br>
		<button>登录</button>
	</form>
</template>

<script>

  let loginForm = {

    template:"#login-form",
    data:function () {
      return {
        username:"",
        password:""
      }
    }

  }

  let registerForm ={
    template: "#register-form",
    data:function (){
      return {
        username: "",
        password:"",
        password2:""
      }
    }
  }
  
  let loginFormPhone = {
    template :"#login-form-phone"
  }

  let loginFormPass={
    template:"#login-form-pass",
    
  }
  
  //创建一个路由实例 并将实例注册进 vue实例中 /也可以直接在vue实例中创建路由实例
  let myRouter = new VueRouter({
    // 路由实例中 有routes 属性 是一个数组 数组中的每个对象是一个路由规则
    routes:[
      {name:"default",path:"/",redirect:"/login/pass"},  //default 表示默认路由规则
      {name:"login",path: "/login",component:loginForm,
             children:[{path: "/login/",component: loginFormPass},{path:"phone",component:loginFormPhone}, {path: "/login/pass",component: loginFormPass}]},  //name 属性表示规则名可以不写 path表示请求的路径  component 表示要注册 并 显示的组件
      //从这里可以看出 组件要想使用必须要先注册在使用
      {name:"register",path: "/register",component:registerForm}
    ]
  })


  let app = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter


  })

</script>
</body>
</html>